<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>H5问卷答题</title>
    <script src="../js/base.min.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/swiper.min.js"></script>
    <link rel="stylesheet" href="../css/swiper.min.css"/>
    <link rel="stylesheet" href="../css/zong.css"/>
</head>
<body>

<div class="swiper-container">



    <div class="swiper-wrapper">

                            <!--首页-->

        <div class="swiper-slide slide-1" flex="dir:top cross:center">

            <img src="../img/2.png"/>
            <img src="../img/3.png"/>
            <img src="../img/4.png"/>

            <a href="javascript:void(0)" id="kaishi" flex>

                <img src="../img/anniu.png"/>
            </a>

        </div>

                        <!--体能篇-->

        <div class="swiper-slide slide-2" flex="dir:top cross:center">

            <header>

                <div>
                    <img src="../img/tinengpian.png"/>
                    <img src="../img/ziti.png"/>
                    <img src="../img/zhong.png"/>
                </div>

            </header>

            <footer>

                <h6>如果你的手机超长待机（夜用姨妈巾都
                    没那么长的那种），你能躺着玩多久？</h6>

                <div>

                    <input type="radio" id="1" name="one"/>

                    <label for="1">

                        <i></i>
                        <p>A.   1小时以下（是的，我没有夜生活）</p>

                    </label>

                    <input type="radio" id="2" name="one"/>

                    <label for="2">

                        <i></i>
                        <p>B.   马马虎虎，1~2小时吧</p>

                    </label>

                    <input type="radio" id="3" name="one"/>

                    <label for="3">

                        <i></i>
                        <p>C.   大战三百回合，估计能有3小时+</p>

                    </label>

                    <input type="radio" id="4" name="one"/>

                    <label for="4">

                        <i></i>
                        <p>D.   感觉可以与世长辞（好，你赢了）</p>

                    </label>





                </div>
            </footer>

            <a href="javascript:void(0)" class="jie"><img src="../img/xiayiti.png"/></a>

        </div>

                        <!--文化篇-->

        <div class="swiper-slide slide-3" flex="dir:top cross:center">

            <header>

                <div>
                    <img src="../img/wenhuapian.png"/>
                    <img src="../img/ziti1.png"/>

                </div>
                <img src="../img/tuiche.jpg"/>
            </header>

            <footer>

                <h6>以上姿势，学术上称为什么？</h6>

                <div>

                    <input type="radio" id="e" name="one"/>

                    <label for="e">

                        <i></i>
                        <p>A.   大叔拉车</p>

                    </label>

                    <input type="radio" id="f" name="one"/>

                    <label for="f">

                        <i></i>
                        <p>B.   妹妹坐车头</p>

                    </label>

                    <input type="radio" id="g" name="one"/>

                    <label for="g">

                        <i></i>
                        <p>C.   老汉推车</p>

                    </label>

                    <input type="radio" id="h" name="one"/>

                    <label for="h">

                        <i></i>
                        <p>D.   小哥带我上街买菜</p>

                    </label>

                </div>

            </footer>

            <a href="javascript:void(0)" class="jie"><img src="../img/xiayiti.png"/></a>

        </div>

                        <!--意志篇-->

        <div class="swiper-slide slide-4" flex="dir:top cross:center">

            <header>

                <div>
                    <img src="../img/yizhipian.png"/>
                    <img src="../img/ziti2.png"/>

                </div>
                <img src="../img/xiaoxin.png"/>
            </header>

            <footer>

                <h6>看到热门话题的时候，你通常会怎么做？</h6>

                <div>

                    <input type="radio" id="i" name="one"/>

                    <label for="i">

                        <i></i>
                        <p>A.   手指一动，随手转发</p>

                    </label>

                    <input type="radio" id="j" name="one"/>

                    <label for="j">

                        <i class="i"></i>
                        <p>B.   冥思两秒，故作深沉，缓慢写下转<br>
                            评文案</p>

                    </label>

                    <input type="radio" id="k" name="one"/>

                    <label for="k">

                        <i class="i"></i>
                        <p>C.   大悬梁刺股，头顶苍天，写不出峰<br>
                            回路转的段子就晒死再八月的日光下</p>

                    </label>

                    <input type="radio" id="l" name="one"/>

                    <label for="l">

                        <i></i>
                        <p>D.   不好意思，我只是个吃瓜的</p>

                    </label>

                </div>

            </footer>

            <a href="javascript:void(0)" class="jie"><img src="../img/xiayiti.png"/></a>

        </div>

                        <!--反应篇-->

        <div class="swiper-slide slide-5" flex="dir:top cross:center">

            <header>

                <div>
                    <img src="../img/fanyingping.png"/>
                    <img src="../img/ziti3.png"/>

                </div>
                <img src="../img/huatong.jpg"/>
            </header>

            <footer>

                <h6>上面这个表情，请你测他的情绪</h6>

                <div>

                    <input type="radio" id="5" name="one"/>

                    <label for="5" flex="cross:center">

                        <i></i>

                        <p>A. 哎呀，那个东西好像很神奇的撒</p>

                    </label>

                    <input type="radio" id="6" name="one"/>

                    <label for="6" flex="cross:center">

                        <i></i>

                        <p>B. 真的假的？你居然找到对象啦？</p>

                    </label>

                    <input type="radio" id="7" name="one"/>

                    <label for="7" flex="cross:center">

                        <i></i>

                        <p>C. 昨晚没洗头，好痒</p>

                    </label>

                    <input type="radio" id="8" name="one"/>

                    <label for="8" flex="cross:center">

                        <i></i>

                        <p>D. 一脸懵逼</p>

                    </label>


                </div>


            </footer>

            <a href="javascript:void(0)" class="shu"><img src="../img/jieshu.png"/></a>

        </div>

    </div>

                    <!--如果需要分页器-->
    <div class="swiper-pagination"></div>

     <!--如果需要导航按钮-->

    <!--<div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>-->


</div>










<script src="../js/zong.js"></script>
</body>
</html>